<template>
  <div id="mainportal" class="container">

  <comhead title="购物车" isLeftIcon="true" leftIconName="angle-left" @leftClick="foBack()" isRightIcon="true" rightIconName="ellipsis-h" @rightClick="updataActive()"></comhead>
   









<div  class="container"  bindtap='cancelDel' >
  <!-- <div   :class="items[index].isTouchMove ? 'touch-move-active' : ''"
     > -->
     
<mt-cell-swipe v-for="(item,index)  in info" class="touch-item"
  :right="[
    {
      content: '删除',
       
      style: { background: 'red', color: '#fff'},
      handler: () => {
        deleteItem(index)
      }
    }
  ]">
  
    <div class="content1" >
      <!-- data-goodid="{{item.goodsId}}" -->
      <div style='display: flex;align-items: center;flex:2.5;' @click='goPdDatil(item.goodsId)'  data-funtype="goPdDatil" >
      <!-- data-index='{{index}}' -->
        <div @click.stop='selectproduct(index)' >
          <img v-if='item.select' src='../../image/18.png' style='height:20px;width:20px;;margin:10px 10px;'/>
          <img v-else src='../../image/16.png' style='height:20px;width:20px;;margin:10px 10px;'/>
        </div>
        <div style='display: flex;align-items: center;'>
          <img :src='item.goodsIcon' mode='aspectFit' style='width:70px;height:70px;margin: 10px 20px;'/>
        </div>
        <div >
          <div>{{item.goodsName}}</div>
          <div style='color: #e51c23;'>￥{{item.price}}</div>
        </div>
      </div>
      <!-- catchtap='goPdDatil' -->
      <div style='flex:1'>
        <div style='display:flex;justify-content:center;'>
          <!-- data-index='{{index}}' -->
        <div style='padding:10px 0 10px 10px' @click.stop="addnum('',index)" >
          <div class="num_small_box" :class="item.num === 1 ?' num_small_box_dis ':' '"  >-</div>
        </div>
        <div class='num_box1' style='margin-top:10px'>{{item.num}}</div>
        <!-- data-index='{{index}}' -->
        <div style='padding:10px  10px 10px 0'  @click.stop="addnum('add',index)" >
          <div class='num_small_box'>+</div>
        </div>

      </div>
      
    </div>

  </div>

   <!-- data-index="{{index}}" -->
  <!-- <div class="del" catchtap="del">删除</div> -->
  </mt-cell-swipe>

  <!-- </div> -->

  



  
  
  
  

  <div style='height:67px' v-if="info.length !=0 "></div>


  <div class='all_price' v-if="info.length !=0 ">
    <div style='display: flex;align-items: center;border-top:solid 1px #e5e5e5;' @click='selectall()'>
      <img v-if='allselect' src='../../image/18.png' style='height:20px;width:20px;;margin:10px 10px;'/>
      <img v-else src='../../image/16.png' style='height:20px;width:20px;;margin:10px 10px;'/>
      全选
    </div>
    <div style='flex:1;padding:5px;text-align:right;border-top:solid 1px #e5e5e5;'>
      <div style='margin:10px 10px 10px 0;font-size:12px;'>合计：
        <span style='color:rgb(229, 28, 35)'>￥</span>
        <span style='font-size:18px;color:rgb(229, 28, 35)'>{{allPrice}}</span></span>
    </div>
        
    </div>

    <div style='padding:0 20px;background-color:rgb(229, 28, 35);color:#fff;display: flex;justify-content: center;align-items: center;' @click='goShop'>去结算</div>
  </div>
  <div v-if="info.length ===0" style="display: flex;justify-content: center;align-items: center;width:100%;height:100vh;background-color:#e5e5e5">
    <div style='text-align:center;padding-bottom:210px;'>
      <img src=''
        style='margin-bottom:10px;width:100px;height:100px;'/>
      <div style='font-size:16px;'>购物车还是空的</div>
    </div>
  </div>

  
</div>











  </div>
</template>

 
 

<script>
import { Toast, Swipe, SwipeItem, Switch, MessageBox } from "mint-ui";
import { Indicator } from "mint-ui";
import { Tabbar, TabItem } from "mint-ui";
import { TabContainer, TabContainerItem } from "mint-ui";
import comhead from "../../common/coffee/Comhead";

export default {
  data() {
    return {
      info: [],
      items: [],
      selectCarts: [],
      allselect: false,
      allPrice: 0,
      cartsLen: 0,
      startX: 0, //开始坐标
      startY: 0,
      num: 1
    };
  },
  computed: {},

  methods: {
    //删除事件
    deleteItem: function(index) {
      let self = this;
      let url = this.$baseUrl.bizUrl + "/shopcart/delete";
      let data = {
        token: this.$store.getters.getLoginStatus.token,
        userId: this.$store.getters.getLoginStatus.userId,
        cartId: this.info[index].cartId
      };
      let callBack = res => {
        if (res == null) {
          console.log("网络请求错误！");
          return;
        }
        if (res.data.status != 200) {
          console.log("请求数据错误");
          return;
        }
        console.log(res);
        console.log("-------------");
        if (res.data.status === 200) {
          MessageBox.alert("删除成功");

          // self.getCarList();
          self.removeByValue(self.info, self.info[index]);
          self.handleCartMoney();
          self.info = self.info;
        }
      };
      this.$reqFormPost(url, data, callBack);
    },
    //去结算
    goShop: function(e) {
      let self = this;
      if (this.selectCarts.length == 0) {
        MessageBox.alert("请选择至少一个商品结算");
        return;
      }
      let url = this.$baseUrl.bizUrl + "/order/checkprice";

      let data = {
        token: this.$store.getters.getLoginStatus.token,
        userId: this.$store.getters.getLoginStatus.userId,
        cartIdList: this.selectCarts.join(",")
      };
      let callBack = res => {
        console.log("判断购物车价格是否有改变", res.data);
        if (res == null) {
          console.log("网络请求错误！");
          return;
        }

        if (res.data.status != 200) {
          MessageBox.alert(res.data.message);
          return;
        }

        if (res.data.status === 200) {
          this.$router.push({
            name: "settle",
            query: {
              pagetype: "carts",
              id: this.selectCarts.join(",")
            }
          });
        }
      };
      this.$reqFormPost(url, data, callBack);
    },
    addnum(type, index) {
      let info = this.info;
      if (type == "add") {
        console.log(info[index]);
        info[index].num += 1;
      } else {
        if (info[index].num === 1) {
          return;
        }
        info[index].num -= 1;
      }
      this.info = info;

      let self = this;
      let url = this.$baseUrl.bizUrl + "/shopcart/update";
      let data = {
        token: this.$store.getters.getLoginStatus.token,
        userId: this.$store.getters.getLoginStatus.userId,
        cartId: this.info[index].cartId,
        num: this.info[index].num
      };
      let callBack = res => {
        if (res == null) {
          console.log("网络请求错误！");
          return;
        }

        if (res.data.status != 200) {
          console.log("请求数据错误" + url);
          return;
        }
        if (res.data.status === 200) {
          self.handleCartMoney();
        }
      };
      this.$reqFormPost(url, data, callBack);
    },

    // 取消商品选择
    removeByValue(arr, val) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] == val) {
          arr.splice(i, 1);
          break;
        }
      }
    },

    //选择商品
    selectproduct(index) {
      let info = this.info;
      let selectCarts = this.selectCarts;
      let allselect = true;

      info[index].select = !info[index].select;
      if (info[index].select) {
        selectCarts.push(info[index].cartId);
      } else {
        this.removeByValue(selectCarts, info[index].cartId);
      }
      if (selectCarts.length === info.length) {
        allselect = true;
      } else {
        allselect = false;
      }
      this.selectCarts = selectCarts;
      this.info = info;
      this.allselect = allselect;
      this.handleCartMoney();
    },

    //全选
    selectall() {
      let info = this.info;
      let count = false;
      let selectCarts = [];

      for (let i = 0; i < info.length; i++) {
        if (this.allselect) {
          info[i].select = false;
        } else {
          (info[i].select = true), selectCarts.push(info[i].cartId);
        }
      }

      this.allselect = !this.allselect;
      this.info = info;
      this.selectCarts = selectCarts;
      this.handleCartMoney();
    },
    //购物车合计金额
    handleCartMoney() {
      // item.price * item.num
      let allPrice = 0;
      for (let i = 0; i < this.info.length; i++) {
        if (this.info[i].select) {
          allPrice = allPrice + this.info[i].price * this.info[i].num;
        }
      }
      this.allPrice = allPrice.toFixed(2);
    },

    goPdDatil(goodid) {
      this.$router.push("/productdetail?id=" + goodid);
    },
    //取购物车列表
    getCarList: function() {
      let self = this;
      let url = this.$baseUrl.bizUrl + "/shopcart/query";

      let data = {
        token: this.$store.getters.getLoginStatus.token,
        userId: this.$store.getters.getLoginStatus.userId
      };
      let callBack = res => {
        if (res == null) {
          console.log("网络请求错误！");
          return;
        }
        if (res.data.status != 200) {
          console.log("请求数据错误");
          return;
        }
        console.log(res);
        console.log("-------------");
        if (res.data.status === 200) {
          let items = [];

          if (res.data.data[0]) {
            for (let i = 0; i < res.data.data[0].cartlist.length; i++) {
              res.data.data[0].cartlist[i].select = false;
              items[i] = { isTouchMove: false };
            }
          } else {
            res.data.data[0] = { cartlist: [] };
          }

          self.info = res.data.data[0].cartlist;
          self.cartsLen = res.data.data[0].cartlist.length;
          self.items = items;
        }
      };
      this.$reqFormPost(url, data, callBack);

      // let res = {
      //   data: {
      //     data: [
      //       {
      //         supplierName: "某个商户",
      //         cartlist: [
      //           {
      //             goodsId: "PD5a582c49db573c56a55ced3e",
      //             cartId: "Cart5a587c6fdb573c56a55ced79",
      //             num: 2,
      //             updateTime: "2018-01-16 17:29:45",
      //             skuContent: "[]",
      //             userId: "U5a40b126db573c16ba83f09e",
      //             merchantName: "某个商户",
      //             goodsModelNumber: "",
      //             prepareId: null,
      //             createTime: "2018-01-12 17:14:23",
      //             goodsIcon:
      //               "http://116.62.22.58:8030/bapi/upload/20180112/file5a582c42db573c5702778a1e.png",
      //             merchantId: "SP5a051b26818d251d1448a108",
      //             price: 1,
      //             goodsName: "变速箱油",
      //             skuId: "SKU5a582c49db573c56a55ced3f"
      //           }
      //         ],
      //         supplierId: "SP5a051b26818d251d1448a108",
      //         totalPrice: 2,
      //         freight: 0,
      //         goodsNum: 2
      //       }
      //     ],
      //     message: "success",
      //     status: 200
      //   }
      // };
    },

    goSign() {
      this.$router.push({ name: "sign" });
    },
    foBack() {
      this.$router.go(-1);
    }
  },
  mounted() {
        document.title ='购物车'

    this.getCarList();
    this.allselect = false;
    this.selectCarts = [];
    this.allPrice = 0;
  },
  components: {
    Tabbar,
    TabItem,
    TabContainer,
    TabContainerItem,
    comhead,
    Swipe,
    SwipeItem
  }
};
</script>
<style>
.container {
  height: 100vh;
  width: 100%;
  background-color: #f5f5f5;
  border-top: 1px solid #e5e5e5;
}

.num_small_box {
  border: solid 1px #ddd;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.num_small_box_dis {
  background-color: #f8f8f8;
}

.num_box1 {
  background-color: #ebebe4;
  font-size: 14px;
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.num_small_box {
  border: solid 1px #ddd;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.all_price {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
  font-size: 14px;
  display: flex;
}

.touch-item {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e5e5e5;
  width: 100%;
  overflow: hidden;
}

.content1 {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  line-height: 22px;
  margin-right: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: translateX(90px);
  transform: translateX(90px);
  margin-left: -90px;
}

.del {
  background-color: #e51c23;
  width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  -webkit-transform: translateX(90px);
  transform: translateX(90px);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.touch-move-active .content1,
.touch-move-active .del {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.mint-cell-title {
  width: 0;
  flex: 0;
}
.mint-cell-value {
  flex: 1;
}
.mint-cell-swipe-button {
  display: flex;
  align-items: center;
}
</style>



<!-- Add "scoped" attribute to limit CSS to this component only -->
